{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-container ws-container">
        <div class="layui-row">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                  <li class="layui-this" lay-id="my_study">我学习的</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                    <div class="layui-row" style="margin-top: 40px;">
                        <div class="layui-col-md12" style="display: flex;justify-content: center;">
                            <div class="layui-col-md4">
                                <div class="layui-form layui-hide-xs ws-search" style="background: #f6f7f9;width: 100%;">
                                    <div class="layui-form-select">
                                        <div class="layui-select-title">
                                            <input type="text" placeholder="搜索" value="" class="layui-input" id="keyword" style="cursor:initial;background-color: #eee;">
                                        </div>
                                    </div>
                                    <i class="layui-icon layui-icon-search k_search" style="left: unset;right: 5px;cursor: pointer;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
            
                    <div class="layui-row layui-col-space30" style="margin-top: 40px;" id="course_list">
                    </div>
            
                    <div class="layui-row">
                        <div class="layui-col-md12 layui-col-sm12" style="display: flex;justify-content: center;">
                            <div id="page_list"></div>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
    {include file='/public/index-foot'}
</body>
<style type="text/css">
    .layui-tab-brief>.layui-tab-title .layui-this {
        color:unset;
    }
    .cmdlist-container {
        background: #fff;border:1px solid transparent;
    }
    .cmdlist-text{
        padding:20px;
    }
    .price {
        margin: 10px 0px 0px 0px
    }
    .price span{
        margin: 0px 5px 0px 0px;
    }
    .price i {
        margin-right: 6px;
    }
</style>
<script type="text/javascript">
    $(function () {
        layui.use(['util'], function () {
            let util = layui.util;
            let laypage = layui.laypage;

            $('.k_search').click(function () {
                // 初始化列表数据
                load_list();
            })
            $("#keyword").keydown(function(event) {
                if (event.which == 13) {
                    // 初始化列表数据
                    load_list();
                }
            });

            // 获取列表数据
            let pg_size = '{$page_size|default=0}';
            function load_list(page = 1) {
                let key = $('#keyword').val();
                let data = {
                    key : key,
                    page : page,
                    limit : pg_size
                }
                httpRequest('{:sysuri("list")}', data, 'post', function (info, ret_data) {
                    // 加载数据
                    let c_list = ret_data.list;
                    let html = '';
                    layui.each(c_list, function (index, item) {
                        html += '<div class="layui-col-md3 layui-col-sm5">'+
                            '<div class="cmdlist-container" m_id="'+item.id+'" lay-on="detail" style="cursor: pointer;">'+
                                '  <img src="'+item.logo+'" style="width: 100%;height:210px">'+
                                '  <div class="cmdlist-text">'+
                                '    <p class="layui-elip">'+item.title+'</p>'+
                                '    <div class="layui-elip price">'+
                                '       <span>'+
                                '            <i class="layui-icon layui-icon-app"></i>'+item.platform+
                                '       </span>'+
                                '    </div>'+
                                '    <div class="price" style="display: flex;">'+
                                '        <span>'+
                                '          <i class="layui-icon layui-icon-spread-left"></i>'+item.chapter_total+
                                '        </span>'+
                                '        <span class="layui-elip">'+
                                '            <i class="layui-icon layui-icon-read"></i>'+item.auther+
                                '        </span>'+
                                '    </div>'+
                                '  </div>'+
                            '</div>'+
                        '</div>';
                    })
                    $('#course_list').empty().html(html);
                    // 普通用法
                    laypage.render({
                        elem: 'page_list',
                        count: ret_data.total, // 数据总数,
                        limit: data.limit,// 每页显示的条数。
                        curr: data.page, //初始化当前页码。
                        jump: function(obj, first){
                            // 首次不执行
                            if(!first){
                                load_list(obj.curr)
                            }
                        }
                    });
                });
            }

            // 跳转详情
            util.on({
                detail: function(){
                    let id = $(this).attr('m_id');
                    util.openWin({
                        url: '{:sysuri("index/practice.course/detail")}?id='+id,
                    });
                },
            });


            // 初始化列表数据
            load_list();
    });
})
</script>